import type { EChartsOption } from "echarts";

export const useInitEchartsGaugeOptions = (name?: string, data?: number, cb?: (o: EChartsOption) => void): EChartsOption => {
  const commonTextStyle = {
    fontSize: 13,
    fontWeight: 600,
    color: "#333",
    align: "center"
  };
  const title = {
    show: true,
    text: name,
    textStyle: commonTextStyle,
    textAlign: "center",
    left: "47%",
    top: "85%",
    itemGap: 10
  };
  const tooltip = {
    show: true,
    formatter: function (params) {
      const v = `<span>${name}：<span style=\"font-weight: 600;\">${params.value}%</span></span>`;
      return v;
    },
    confine: true
  };
  const series = [
    {
      type: "gauge",
      radius: "91%",
      axisLine: {
        lineStyle: {
          width: 8,
          color: [
            [0.2, "#FFD360"],
            [0.8, "#34D399"],
            [1, "#F87171"]
          ]
        }
      },
      pointer: {
        width: 4,
        itemStyle: {
          color: "auto"
        }
      },
      axisTick: {
        distance: 2,
        length: 4,
        lineStyle: {
          width: 2
        }
      },
      splitLine: {
        distance: 2,
        length: 8,
        lineStyle: {
          width: 2
        }
      },
      axisLabel: {
        color: "inherit",
        distance: 10,
        fontSize: 10
      },
      detail: {
        show: true,
        valueAnimation: true,
        formatter: "{value}%",
        fontSize: 12,
        color: "inherit"
      },
      data: [{ value: data }]
    }
  ];
  const options = { title, name, tooltip, series } as EChartsOption;
  cb && cb(options);
  return options;
};
